<template>
  <div class="flex grow column">
    <div class="box grow column" ref="detail">
      <div class="detail">
        <div class="title">{{detail.articleTitle}}</div>
        <div class="time">{{detail.formatTime}}</div>
        <div class="txt" v-html="detail.articleContent"></div>
      </div>
    </div>
    <div class="stockBox flex shrink column">
      <div class="title">相关个股</div>
      <div class="stockList clear">
        <span class="fl" v-for="item in stockList" :key="item.id" @click="stockDetail(item.stockCode)">
          {{item.stockName}}
        </span>
      </div>
    </div>
  </div>

</template>

<script>
import { imgPath } from "../../script/fn";

export default {
  data() {
    return {
      detail: [],
      stockList: []
    };
  },
  computed: {},
  beforeRouteEnter(to, from, next) {
    const articleId = to.params.articleId;
    const article = window.articleList.filter(
      item => item.articleId == articleId
    );
    article[0].articleContent = imgPath(article[0].articleContent);
    next(vm => {
      vm.detail = article[0];
      vm.stockList = article[0].relationStock;
      vm.$refs.detail.scrollTop = 0;
    });
  },
  mounted() {},
  methods: {
    stockDetail(code) {
      const type = code.match(/(\w)+$/g)[0] == "SS" ? "1" : "0";
      window.prompt(
        "",
        `up://["open.stock",${Date.now()},{"setcode":"${type}","code":"${code.replace(
          /\.(\w)+$/g,
          ""
        )}","type":"首页"}]`
      );
    }
  }
};
</script>
<style>
.txt img {
  max-width: 100%;
}
</style>
<style scoped lang='scss'>
.box {
  overflow-y: auto;
  height: 80%;
  .detail {
    padding: 24px 30px 20px;
    .title {
      color: #fff;
      font-size: 22px;
      text-align: center;
      font-weight: 400;
      word-break: break-all;
    }
    .time {
      color: #cccccc;
      font-size: 15px;
      font-weight: 400;
      text-align: center;
      margin: 13px 0 16px;
    }
    .txt {
      border-top: 1px solid #666666;
      padding-top: 15px;
      font-size: 16px;
      color: rgba(255, 255, 255, 0.7);
      line-height: 28px;
      text-align: justify;
      word-break: break-all;
    }
  }
}
.stockBox {
  height: 14%;

  .title {
    height: 30px;
    line-height: 30px;
    background: #393a3e;
    border: 1px solid #434448;
    border-left: 2px solid #ff8a1b;
    padding-left: 13px;
    font-size: 15px;
    font-weight: 400;
  }
  .stockList {
    overflow-y: auto;
    line-height: 47px;
    color: #407ffe;
    font-size: 18px;
    font-weight: 400;
    span {
      padding: 0 17px;
      cursor: pointer;
      &:hover {
        color: #f6b936;
      }
    }
  }
}
</style>
